<template>
	<view class="statistics">
		<u-navbar title="录入气温" title-size="36" title-color="#333333"></u-navbar>
		
		<view class="uForm">
			<u-field
				v-model="collectTime"
				label="采集时间"
				required
				disabled
				input-align="right"
				right-icon="arrow-right"
				placeholder="请选择"
				@click="show = true"
			>
			</u-field>
			<u-picker v-model="show" 
				mode="time" 
				confirm-color="#00A1F2" 
				:params="params"
				@confirm="onTimeConfirm"></u-picker>
			<u-field
				v-model="airTemperatureString"
				label="记录气温(℃)"
				required
				disabled
				:clearable="false"
				input-align="right"
				right-icon="arrow-right"
				placeholder="请选择"
				@click="showRate = true"
			>
			</u-field>
			<u-picker v-model="showRate"
				mode="multiSelector" 
				confirm-color="#00A1F2" 
				:range="multiSelector"
				:default-selector="[100, 0, 0, 0]"
				@confirm="onRateConfirm"></u-picker>
		</view>
		<view class="home-tips">
			<view class="tip-title">
				温馨提示：
			</view>
			<view class="tip-content">
				1、每天测量记录距离地面1米的气温，整点记录，共记录24
				次；<br />
				2、梨树需冷量评价模型为≤7.2℃模型。具体就是指自然休眠
				结束时经历7.2℃以下低温的小时数，以秋季日平均温度稳定
				通过7.2℃（连续3天）的日期为有效低温累积的起点；<br />
				3、计算时段的确定：起始日期—终止日期内符合条件的小时
				数量之和
			</view>
		</view>
		
		<view class="btn-group">
			<u-button type="primary" :disabled="btnDisabled" @click="onSubmit" class="startBtn" shape="circle">提交</u-button>
		</view>
	</view>
</template>

<script>
let selector = []
for(let i = -100; i <= 100; i++) {
	selector.push(i)
}
export default {
	data() {
		return {
			params: {
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: false,
				second: false
			},
			selector,
			multiSelector: [
				selector, 
				['.'],
				[0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
				['℃'],
			],
			show: false,
			showRate: false,
			collectTime: null,
			airTemperature: '',
			airTemperatureString: ''
		}
	},
	computed: {
		btnDisabled() {
			if(!this.collectTime || this.airTemperature == '') {
				return true
			}
			return false
		}
	},
	methods: {
		onSubmit() {
			this.$u.post('/public/lipingggu/addLipingguTemperatureRecord', {
				collectTime: this.collectTime,
				airTemperature: Number(this.airTemperature)
			}).then(res => {
				if(res && res.status == -1) {
					return
				}
				uni.showToast({
					title: '提交成功'
				});
				
				setTimeout(() => {
					this.$u.route({
						type: 'switchTab',
						url: '/pages/index'
					})
				}, 500)
			})
		},
		onRateConfirm(val) {
			this.airTemperature = this.multiSelector[0][val[0]] + '.' + this.multiSelector[2][val[2]]
			this.airTemperatureString = this.multiSelector[0][val[0]] + '.' + this.multiSelector[2][val[2]] + '℃'
		},
		onTimeConfirm(val) {
			this.collectTime = `${val.year}-${val.month}-${val.day} ${val.hour}:00`
		},
		checkNum(e) {
			let val = e.replace(/(^\s*)|(\s*$)/g, "")
			if (!val) {
				this.val = '';
				return
			}
			var reg = /[^\d.]/g
		
			// 只能是数字和小数点，不能是其他输入
			val = val.replace(reg, "")
			// // 保证第一位只能是数字，不能是点
			val = val.replace(/^\./g, "");
			// // 小数只能出现1位
			val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
			// // 小数点后面保留1位
			val = val.replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3');
			this.$nextTick(() => {
				this.airTemperature = val;
			})
		}
	}
}
</script>

<style lang="less" scoped>
.statistics {
	background-color: #F7F7F7;
	min-height: 100vh;
}
/deep/.u-label {
	flex: 0 0 100px !important;
}
.home-tips {
	padding: 48rpx;
	font-size: 24rpx;
	color: #333333;
	.tip-content {
		line-height: 40rpx;
		opacity: 0.6;
		padding-top: 24rpx;
		text-align: justify;
	}
}
.uForm {
	background-color: #FFFFFF;
	padding: 0 24rpx;
}
.btn-group {
	padding: 0 48rpx;
}
/deep/.u-btn--primary {
	line-height: 96rpx;
	background: #00A1F2 !important;
	box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.06);
	border-radius: 48rpx;
	color: #fff !important;
	font-size: 36rpx;
	
}
</style>
